// 这个文件用来专门注册路由的,注册路由将不会改变其他文件
// import Home from '../pages/Home'
// import Login from '../pages/Login'
// import Register from '../pages/Register'
// import Search from '../pages/Search'
// import Test from '../pages/Test'
// import VuexTest from '@/pages/VuexTest'
// import Detail from '@/pages/Detail'
// import AddCartSuccess from '@/pages/AddCartSuccess'
// import ShopCart from '@/pages/ShopCart'
// import Trade from '@/pages/Trade'
// import Pay from '@/pages/Pay'
// import PaySuccess from '@/pages/PaySuccess'
// import Center from '@/pages/Center'
// import MyOder from '@/pages/Center/MyOrder'
// import GroupOrder from '@/pages/Center/GroupOrder'

const Home = () => import( '../pages/Home')
const Login = () => import( '../pages/Login')
const Register = () => import( '../pages/Register')
const Search = () => import( '../pages/Search')
const Test = () => import( '../pages/Test')
const VuexTest = () => import( '@/pages/VuexTest')
const Detail = () => import( '@/pages/Detail')
const AddCartSuccess = () => import( '@/pages/AddCartSuccess')
const ShopCart = () => import( '@/pages/ShopCart')
const Trade = () => import( '@/pages/Trade')
const Pay = () => import( '@/pages/Pay')
const PaySuccess = () => import( '@/pages/PaySuccess')
const Center = () => import( '@/pages/Center')
const MyOder = () => import( '@/pages/Center/MyOrder')
const GroupOrder = () => import( '@/pages/Center/GroupOrder')

// import Home from '../pages/Home'
// 正常加载
// 1. 正常加载是同步加载的
// 2. 正常加载是所有的包一次性全部加载完毕,合成了app.js这个文件


// const Home = () => import(`../pages/Home`)
// 路由懒加载
// 1. 懒加载是异步加载的
// 2. 路由懒加载是渲染哪个页面,加载哪个页面,这样app.js这个文件的体积大大较少

// 路由懒加载的优势
// 当使用路由懒加载的时候,进入哪个页面加载哪个页面,让app.js这个文件变小,首次打开网站的时候速度就会变快,相当于优化了首次打开网站的速度

import communicationRoute from './communication-route'
const SlotDemo = () => import('@/pages/SlotDemo')

export default [
  communicationRoute,
  {
    path:'/home',
    component:Home,
  },
  {
    path:'/login',
    component:Login,
    meta:{isHiddenFooter:true} //isHiddenFooter用于标识当前路由是否展示Footer组件
  },
  {
    path:'/register',
    component:Register,
    meta:{isHiddenFooter:true}
  },
  {
    name: 'search',
    path:'/search/:keyword?',
    component:Search,
    // 路由独享守卫
    // beforeEnter: (to, from, next) => {
    //   console.log('路由独享守卫 - beforeEnter')
    //   next();
    // }
  },
  {
    name: 'detail',
    path: '/detail/:skuId', // 这里 sku 代表的就是商品, 一个sku就是一个商品
    component: Detail
  },
  {
    // 路由path匹配的时候,默认不区分大小写
    // 如果想要区分大小写,怎么做?
    caseSensitive: true, // 是否匹配大小写,默认是false
    path: '/addCartSuccess/:skuNum',
    component: AddCartSuccess,
    beforeEnter: (to, from, next) => {
      // 只有携带了 skuNum 和 sessionStorage 内部有 skuInfo 数据，才能看到添加购物车成功的界面
      if (to.params.skuNum && sessionStorage.getItem('SKUINFO')) {
        next();
      } else {
        alert('必须包含商品数量(skuNum)和商品信息(skuInfo)才可以进入添加成功页面')
        next('/');
      }
    }
  },
  {
    path: '/shopcart',
    component: ShopCart
  },
  {
    path: '/trade',
    component: Trade,
    beforeEnter: (to, from, next) => {
      // 只能从购物车页面进入交易页面
      if (from.path.includes('/shopcart') || from.path.includes('/login')) { // 兼容 login 的目的是想去而没有去的页面这个需要
        next();
      } else {
        alert('只能从购物车页面进入交易页面')
        next('/')
      }
    }
  },
  {
    path: '/pay',
    component: Pay,
    beforeEnter: (to, from, next) => {
      // 只有从交易页面（创建订单）页面才能跳转到支付页面
      if (from.path.includes('/trade')) {
        next()
      } else {
        alert('只能从交易页面跳转到支付页面')
        next('/')
      }
    }
  },
  {
    path: '/paySuccess',
    component: PaySuccess,
    beforeEnter: (to, from, next) => {
      if (from.path.includes('/pay')) {
        next()
      } else {
        alert('只能从支付页面跳转到支付成功页面')
        next('/')
      }
    }
  },
  {
    path: '/center',
    component: Center,
    children: [
      {
        // path: '/center/myorder', // 全写
        path: 'myOrder', // 简写
        component: MyOder
      },
      {
        path: 'groupOrder',
        component: GroupOrder
      },
      {
        path: '', // 路径为空字符串的时候,代表的是父路由路径
        redirect: 'myOrder' // 重定向的时候,没有写/,会拿着当前写这个值拼接父级路由path,这个特性在一级路由的时候不适用
      }
    ]
  },
  {
    path:'/vuextest',
    component: VuexTest,
  },
  {
    path:'/test',
    component:Test,
  },
  {
    path: '/slotdemo',
    component: SlotDemo,
    meta: { isHiddenFooter: true },
  },
  {
    path:'/',
    redirect:'/home'
  },
]